{include file="common/header"}
<div id="app" v-cloak>
    <div class="el-pane-warp">
		<el-form ref="ruleForm" :rules="rules" :model="config" label-width="180px">
			<el-form-item prop="EBusinessID" label="用户ID：">
			    <el-input type="password" v-model="config.EBusinessID" show-password></el-input>
                即用户ID，登录快递鸟官网会员中心获取<a href="https://www.kdniao.com/UserCenter/v4/UserHome.aspx" target="_blank">点击获取</a>
			</el-form-item>
			<el-form-item prop="ApiKey" label="API key：">
			    <el-input type="password" v-model="config.ApiKey" show-password></el-input>
                即API key，登录快递鸟官网会员中心获取<a href="https://www.kdniao.com/UserCenter/v4/UserHome.aspx" target="_blank">点击获取</a>
			</el-form-item>
		</el-form>
		<div class="el-bottom">
			<el-button 
				size="medium"
				:loading="loading" 
				type="primary" 
				icon="el-icon-refresh-right" 
				@click="save()">
				保 存
			</el-button>
			<el-button 
    			size="medium" 
    			type="warning" 
    			@click="dialog = true">
			    测 试
			</el-button>
            <el-dialog
                title="物流查询测试"
                width="50%"
                :visible.sync="dialog"
                :close-on-click-modal="false"
                append-to-body>
                <el-form ref="form" :model="form" label-width="100px">
                    <el-form-item label="快递编码：">
                        <el-input v-model="form.ShipperCode"></el-input>
                        <a href="https://www.kdniao.com//file/快递鸟接口支持快递公司编码.xlsx" target="_blank">查看快递公司编码</a>
                    </el-form-item>
                    <el-form-item label="快递单号：">
                        <el-input v-model="form.LogisticCode"></el-input>
                    </el-form-item>
                    <el-form-item label="物流轨迹：">
                        <div v-if="track.length ==0">暂无物流轨迹</div>
                        <el-timeline v-else>
                            <el-timeline-item
                                v-for="(activity, index) in track"
                                :key="index"
                                :timestamp="activity.AcceptTime">
                                {{activity.AcceptStation}}
                            </el-timeline-item>
                        </el-timeline>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="test">立即查询</el-button>
                    </el-form-item>
                </el-form>
            </el-dialog>
		</div>
	</div>
</div>
<script>
	new Vue({
	    el: '#app',
	    data() {
	        return {
	        	url: "kdniao/config/index",
	        	testUrl: "kdniao/config/test",
	        	track: [],
	        	form: {
	        	    ShipperCode: '',
	        	    LogisticCode: '',
	        	},
	        	config: {:json_encode($config)},
	        	loading: false,
	        	dialog: false,
	        	rules: {
                    EBusinessID: [
                        { required: true, message: '请填写', trigger: 'blur' },
                    ],
                    ApiKey: [
                        { required: true, message: '请填写', trigger: 'blur' },
                    ],
                },
	        }
	    },
	    methods: {
	        /**
             * 保存基础配置
             */
	        save() {
	        	let self = this;
	        	self.loading = true;
	        	request.post(self.url, {config: self.config}, function(res){
                    self.loading = false;
                    self.$notify({showClose: true, message: res.message, type: res.status});
                });
	        },
	        /**
	    	 * 测试
	    	 */
	    	test() {
	    		let self = this;
	    		request.post(self.testUrl, self.form, function(res) {
	                if (res.status === 'success') {
	                    self.track = res.data;
	                } else {
	                    self.$notify({ showClose: true, message: res.message, type: res.status});
	                }
	                self.qrcodeLoading = false;
	            });
	    	},
	    }
	})
</script>
{include file="common/footer"}